<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title></title>
		<link rel="stylesheet" href="./Bootstrap4.6.1/css/bootstrap.css">
		<script src="./Bootstrap4.6.1/js/jquery.js"></script>
		<script src="./Bootstrap4.6.1/js/bootstrap.bundle.js"></script>
		<style>
			div{
				outline: 1px red solid;
			}
			
			
			/* 顶部区域 */
			.top h1{
				text-align: center;
				margin: 2rem 0;
			}
			.top .top-nav-btn{
				display: none;
			}
			.top .top-nav{
				display: flex;
				/* 水平分散对齐 */
				justify-content: space-around;
				background-color: black;
				padding: 0 9rem;
				/* 用负的外边距，来抵消父元素的内边距 */
				margin: 0 -15px;
			}
			.top .top-nav>div{
				background-color: white;
				margin: 1rem 0;
				padding: 0.5rem;
				border-radius: 5px;
			}
			
			/* 在中屏下 */
			@media screen and (max-width:991px) {
				.top .top-nav{					
					padding: 0 ;
				}				
			}
			/*在小屏下 */
			@media screen and (max-width:767px) {
				.top .top-nav-btn{
					display: block;
				}
				.top .top-nav{
					display: none ;					
				}
				.top:hover .top-nav{
					display: flex;
					flex-wrap: wrap;					
				}
				.top .top-nav >div{
					flex: 1;
					flex-basis: 90%;
					margin: 0.5rem 1rem;
				}
				
			}
		
			/* 中间区域 */
			
			.main .main-row-02>div{
				text-align: center;
			}
			.main .main-row-02>div .title01{
				font-weight: bold;
			}
			.main .main-row-03>div{
				background-color: black;
				border-radius: 5px;
				padding: 0.5rem;
				margin: 2rem 0.5rem;
				color: white;
				text-align: center;
			}
			.main .main-row-04 img{
				width: 100%;
			}
			/* 第四行里面子元素里面的第二个子元素 */
			.main .main-row-04 > div > *:nth-child(2){
				font-weight: bold;
				text-align: center;
			}
			/* 第四行里面子元素里面的第四个子元素 */
			.main .main-row-04 > div > *:nth-child(4){
				text-align: center;
				background-color: black;
				color: white;
				margin: 0.5rem 3rem;
				margin-bottom: 5rem;
				border-radius: 5px;
			}
			.main .main-row-04 .title-h1{
				text-align: center;
				font-weight: bold;
				font-size: 2rem;
				margin: 3rem 0;
			}
		</style>
	</head>
	<body>
		<!-- 顶部 -->
		<div class="container-fluid top">
			<h1>AdMaster</h1>
			<img class="top-nav-btn" src="./img/1.png" alt="">
			<div class="top-nav">				
				<div>Home</div>
				<div>solution</div>
				<div>Market Lnsights</div>
				<div>College</div>
				<div>About Us</div>
			</div>
		</div>
		<!-- 中间主体 -->
		<div class="container main">
			<div class="row">
				<img class="w-100 my-3"  src="./img/pic01.jpg" alt="">
			</div>
			<div class="row justify-content-between main-row-02">
				<div class="col-12 col-md-3">
					<img src="./img/2.jpg" alt="">
					<div class="title01">Ipsum consequat</div>
					<div>Nisl amet dolor sit ipsum veroeros sed blandit consequat veroeros et magna tempus.</div>
				</div>
				<div class="col-12 col-md-3">
					<img src="./img/3.jpg" alt="">
					<div class="title01">Ipsum consequat</div>
					<div>Nisl amet dolor sit ipsum veroeros sed blandit consequat veroeros et magna tempus.</div>
				</div>
				<div class="col-12 col-md-3">
					<img src="./img/4.jpg" alt="">
					<div class="title01">Ipsum consequat</div>
					<div>Nisl amet dolor sit ipsum veroeros sed blandit consequat veroeros et magna tempus.</div>
				</div>
			</div>
			<div class="row justify-content-center main-row-03">
				<div class="col-12 col-md-2">Get Started</div>
				<div class="col-12 col-md-2">Learn More</div>
			</div>
			<div class="row justify-content-between main-row-04">
				<div class="col-12 title-h1">My Portfolio</div>
				<div class="col-12 col-md-5 col-lg-3 mx-1">
					<img src="./img/pic02.jpg" alt="">
					<div>Ipsum feugiat et dolor</div>
					<div>Lorem ipsum dolor sit amet sit veroeros sed amet blandit consequat veroeros lorem blandit adipiscing et feugiat phasellus tempus dolore ipsum lorem dolore.</div>
					<div>Find out more</div>
				</div>
				<div class="col-12 col-md-5 col-lg-3 mx-1">
					<img src="./img/pic03.jpg" alt="">
					<div>Ipsum feugiat et dolor</div>
					<div  style="height: 10rem; overflow: hidden;">Lorem ipsum dolor sit ametorem ipsum dolor sit amet sit veroeros sed amet blandit consequat veroeros lorem blanditorem ipsum dolor sit amet sit veroeros sed amet blandit consequat veroeros lorem blandit sit veroeros sed amet blandit consequat veroeros lorem blandit adipiscing et feugiat phasellus tempus dolore ipsum lorem dolore.</div>
					<div>Find out more</div>
				</div>
				<div class="col-12 col-md-5 col-lg-3 mx-1">
					<img src="./img/pic04.jpg" alt="">
					<div>Ipsum feugiat et dolor</div>
					<div>Lorem ipsum dolor sit amet sit veroeros sed amet blandit consequat veroeros lorem blandit adipiscing et feugiat phasellus tempus dolore ipsum lorem dolore.</div>
					<div>Find out more</div>
				</div>
				<div class="col-12 col-md-5 col-lg-3 mx-1">
					<img src="./img/pic05.jpg" alt="">
					<div>Ipsum feugiat et dolor</div>
					<div>Lorem ipsum dolor sit amet sit veroeros sed amet blandit consequat veroeros lorem blandit adipiscing et feugiat phasellus tempus dolore ipsum lorem dolore.</div>
					<div>Find out more</div>
				</div>
				<div class="col-12 col-md-5 col-lg-3 mx-1 ">
					<img src="./img/pic06.jpg" alt="">
					<div>Ipsum feugiat et dolor</div>
					<div>Lorem ipsum dolor sit amet sit veroeros sed amet blandit consequat veroeros lorem blandit adipiscing et feugiat phasellus tempus dolore ipsum lorem dolore.</div>
					<div>Find out more</div>
				</div>
				<div class="col-12 col-md-5 col-lg-3 mx-1">
					<img src="./img/pic07.jpg" alt="">
					<div>Ipsum feugiat et dolor</div>
					<div>Lorem ipsum dolor sit amet sit veroeros sed amet blandit consequat veroeros lorem blandit adipiscing et feugiat phasellus tempus dolore ipsum lorem dolore.</div>
					<div>Find out more</div>
				</div>
			</div>
		</div>
		<!-- 底部 -->
		<div class="container-fluid bottom">
			底部
		</div>
		
	</body>
</html>